<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Timers</title>

    <style type="text/css">
        #block {
            width: 400px;
        }
    </style>

    <script type="text/javascript">
    //<![CDATA[
        
        window.onload = function() {
            document.getElementById("block").style.backgroundColor="#ffffff";
            setTimeout("colorFlash(255)", 300);
        }

        function colorFlash(newColor) {
            var hexVal = newColor.toString(16);

            if(hexVal.length < 2) {
                hexVal = "0" + hexVal;
            }

            var colorString = "#ffff"+hexVal;
            var blockDiv = document.getElementById("block");
            blockDiv.style.backgroundColor = colorString;
            if(newColor > 0) {
                newColor -= 5;
                setTimeout("colorFlash(" + newColor +")", 50);
            }
        }
    

    //]]>

    </script>
    
</head>
<body>
    <div id="block">
        <h1>Hello</h1>
    </div>
</body>
</html>
